<script setup lang='ts'>
import { PureTableBar } from "@/components/RePureTableBar";
import ScreenWashMoney from "@/components/Screen-WashMoney/index.vue";
import { useAcquisitionList } from "./hooks/AcquisitionList";
const {
  columns,
  loading,
  dataList,
  pagination,
  handleSizeChange,
  handleCurrentChange
} = useAcquisitionList('0');

</script>

<template>
  <!-- 3.3.5.5.3.1.1.反洗钱数据列表 -->
  <div class="main">
    <div class="main_top">
      <el-scrollbar height="100%">
        <ScreenWashMoney />
      </el-scrollbar>
    </div>
    <div class="main_bottom">
      <PureTableBar class="list_hei">
        <template v-slot="{ size, checkList }">
          <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
            :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination" max-height="550"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }">
          </pure-table>
        </template>
      </PureTableBar>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

.main {
  height: 100%;
}

.main_top {
  height: 49.5%;
  padding: 10px;
  border: 1px solid #dcdfe6;
}

.main_bottom {
  top: 1%;
  height: 49.5%;
  position: relative;
  border: 1px solid #dcdfe6;
}

.pure-table {
  height: calc(100% - 10px);
}

:deep(.el-dialog__footer) {
  text-align: center;
}

:deep(.list_hei) {
  .flex {
    display: none;
  }
}

:deep(.list_hei.p-2) {
  padding: 0;
}

:deep(.list_hei.mt-6) {
  margin: 0;
}

@media screen and (max-width:1600px) {
  :deep(.el-table--fit) {
    height: 78%;
  }
}
</style>
